<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<script src="/js/jquery.min.js"></script>
	<script src="/layui/layui.js"></script>
<style>
	body{
		background-image: url("http://localhost:8081/images/201910280135559858.jpg");
	}
	/*login页面*/
	.container{
		border: 1px solid rgba(255,255,255,0.3);
		margin-top: 100px;
		width: 60%;

		margin-left: 40%;

	}
	#l1,#l2,#l3,#l4{
		color: white;
	}

</style>
<body>
	<div class="container">
		<div class=""  style="width:70%; height: 60px;padding-top: 1px;">
	       <h2 align="center" style="color: white;font-size: 25px">用户登录</h2>
	   </div>
		<br><br>
		<form  name="myform" method="post" class="form-horizontal" role="form" id="username">
			<div class="form-group has-success">
				<label class="col-sm-2 col-md-2 control-label" id="l1">邮箱</label>
				<div class="col-sm-4 col-md-4">
					<input type="email" class="form-control"
					 placeholder="请输入您的邮箱" id="email"
					/>
					<span id="span1" ></span>
				</div>
			</div>
		
			<div class="form-group has-success">
				  <label class="col-sm-2 col-md-2 control-label" id="l2">密码</label>
				  <div class="col-sm-4 col-md-4">
		  				<input type="password" class="form-control"
					 placeholder="请输入您的密码" id="password"/>
					 <span ></span>
				  </div>
			 </div>
			 
			 <div class="form-group has-success">
				  <label class="col-sm-2 col-md-2 control-label" id="l3">验证码</label>
				  <div class="col-sm-4 col-md-4">
				  		<table style="width: 100%">
				  			<tr >
				  				<td><input type="text" class="form-control"
					 placeholder="请输入验证码" id="loginCode"/></td>
					 			<td height="34px">
<!--									当页面记载到63行的时候发送一个请求给服务端，获取验证码-->
<!--									th:src="@{/getCode}"-->
					 				<img  id="mycode"  src="/getCode" height="34px">
					 			</td>
					 			<td  >
					 				<a href="javascript:refreshCode()" style="color: white;">看不清换一张</a>
					 			</td>
				  			</tr>
				  		</table>
				  </div>
			 </div>
			 
			 
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="button" id="loginBtn" class="btn btn-success" >登录</button>
					<button type="reset" class="btn btn-primary" >重置</button>
					<input type="button" class="btn btn-primary" value="邮箱登录" onclick="toEmail()">
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<font size="6" color="red">
						<span ></span>
					</font>
				</div>
			</div>
		</form>

	</div>
</body>

<script>
	<!--验证码刷新-->
	function refreshCode(){
		//需要指定一个值变化的参数，浏览器才会将其当做一个请求
		$("#mycode").attr("src","/getCode?time="+new Date().getTime());
	}

	//给id=email 添加一个失去焦点事件，用于判断邮箱
	$("#email").blur(function (){
		var email = $("#email").val();
		$.ajax({
			url:"/checkLoginEmail",
			data:{"email":email},
			type:"post",
			dataType:"json",
			success:function (data){
				if(data.code == 200)
				{
					// $("#span1").text(data.message);
					// $("#span1").attr("style","green");
					layer.msg(data.message);
				}else {
					layer.alert(data.message);
				}
			}
		})
	})
	// 给id=loginBtn 添加一个点击事件，进行登录验证
	$("#loginBtn").click(function (){
		// 获取登录信息
		var email = $("#email").val();
		var password = $("#password").val();
		var code = $("#loginCode").val();
		$.ajax({
			url:"/doLogin",
			data:{"email":email,"password":password,"code":code},
			type:"post",
			dataType:"json",
			success:function (data){
				if(data.code != 200)
				{
					layer.alert(data.message);

				}else {
					layer.msg(data.message);
					location.href = "/toIndex";
				}
			}
		})
	});
</script>
</html>